<template>
	<view class="VideoPay" :class="{ active: show }" @click="$emit('close')">
		<view class="popup" @click.stop="">
			<view class="p_head">
				<view class="left">
					<text class="text1">{{ $t('videoPay.support') }}</text>
				</view>
				<view class="right" @click="$emit('close')">{{ $t('videoPay.close') }}</view>
			</view>
			<view class="p_text">
				<view class="left">
					<text class="text1">{{ $t('videoPay.unlockEpisodeLabel') }}</text>
					<text class="text2">{{ price }}{{ $t('videoPay.points') }}</text>
				</view>
				<view class="right">{{ $t('videoPay.balancePrefix') }}{{ userInfoStore.usable || 0 }}{{ $t('videoPay.points') }}</view>
			</view>
			<view class="p_list">
				<!-- <view class="item">
					<view class="content">
						<view class="line1">
							<text class="text1">69.9</text>
							<text class="text2">元</text>
						</view>
						<view class="line2">
							<text class="text1">6900</text>
							<text class="text2">+2500积分</text>
						</view>
					</view>
					<view class="tips">多送30元</view>
					<view class="badge">特惠</view>
				</view> -->
				<!-- <view class="item">
					<view class="content">
						<view class="line1">
							<text class="text1">69.9</text>
							<text class="text2">元</text>
						</view>
						<view class="line2">
							<text class="text1">6900</text>
							<text class="text2">+2500积分</text>
						</view>
					</view>
					<view class="badge">特惠</view>
				</view> -->
				<view class="item item2">
					<view class="content">
						<view class="line1">
							<text class="text1">{{ price/100 }}</text>
							<text class="text2">{{ $t('videoPay.currency') }}</text>
						</view>
						<view class="line2">
							<text class="text1">{{ $t('videoPay.unlockEpisodeShort') }}</text>
							<text class="text2"></text>
						</view>
					</view>
				</view>
				<view class="item item2">
					<view class="content">
						<view class="line1">
							<text class="text1">{{ videoPrice/100 }}</text>
							<text class="text2">{{ $t('videoPay.currency') }}</text>
						</view>
						<view class="line2">
							<text class="text1">{{ $t('videoPay.unlockAll') }}</text>
							<text class="text2"></text>
						</view>
					</view>
				</view>
				<!--<view class="item item2" @click="gotoPage('/pages/user/integral/recharge')">
					<view class="content">
						<view class="line1">
							<text class="text1">积分充值</text>-->
							<!-- <text class="text2">元</text> -->
						<!--</view>
						<view class="line2">
							<text class="text1">享更多优惠</text>-->
							<!-- <text class="text2"></text> -->
						<!--</view>
					</view>
				</view> -->
				<view class="item item2" @click="gotoPage('/pages/user/member/index')">
					<view class="content">
						<view class="line1">
							<text class="text1">{{ $t('videoPay.openVip') }}</text>
							<!-- <text class="text2">元</text> -->
						</view>
						<view class="line2">
							<text class="text1">{{ $t('videoPay.vipBenefits') }}</text>
							<!-- <text class="text2"></text> -->
						</view>
					</view>
				</view>
				<view class="item item2" @click="gotoPage('/pages/user/integral/task')">
					<view class="content">
						<view class="line1">
							<text class="text1">{{ $t('videoPay.freePoints') }}</text>
							<!-- <text class="text2">元</text> -->
						</view>
						<view class="line2">
							<text class="text1">{{ $t('videoPay.earnPoints') }}</text>
							<!-- <text class="text2"></text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="p_info">{{ $t('videoPay.notice') }}</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		name: "VideoPay",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			price: {
				type: Number,
				default: 0
			},
			videoPrice: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				userInfoStore: this.$store.state.user.userInfo
			};
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["iosIsPay"]),
		},
		watch: {
			userInfo: {
				deep: true,
				handler: function(newValue, oldValue) {
					this.userInfoStore = newValue
				}
			},
			show(newValue, oldValue) {
				if(newValue) {
					this.getUserInfo()
				}
			},
		},
		created() {
			
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			gotoPage(url) {
				// #ifdef MP-WEIXIN
				if(!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
				// #endif
				if(!this.token) return this.$u.toast(this.$t('userCenter.pleaseLogin'))
				this.jumpView(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.VideoPay {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: -100%;
		left: 0;
		z-index: 100;
		transition: all 0.5s;
		
		&.active {
			bottom: 0;
		}
		
		.popup {
			width: 100%;
			min-height: 60%;
			background: #000;
			border-radius: 20rpx 20rpx 0 0;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			color: #fff;
			padding: 0 40rpx 60rpx 40rpx;
			border-top: 2rpx solid #333;
			display: flex;
			flex-direction: column;
			
			.p_head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				padding: 30rpx 0;
				font-size: 32rpx;
				
				.left {
					flex: 1;
					display: flex;
					flex-direction: row;
					
					.text1 {
						font-weight: 700;
						line-height: 48rpx;
					}
					
					.text2 {
						font-size: 24rpx;
						color: rgba(#fff, 0.5);
						margin: 0 40rpx;
						white-space: nowrap;
						line-height: 48rpx;
					}
				}
				
				.right {
					color: #FFD700;
					white-space: nowrap;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}
			
			.p_text {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				
				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					
					.text2 {
						color: #FFD700;
						font-weight: 700;
						font-size: 32rpx;
					}
				}
				
				.right {
					color: rgba(#fff, 0.7);
				}
			}
			
			.p_list {
				flex: 1;
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				
				.item {
					width: calc((100% - 40rpx) / 2);
					height: 180rpx;
					border-radius: 24rpx;
					background: rgba(255, 255, 255, 0.1);
					backdrop-filter: blur(10rpx);
					border: 2rpx solid rgba(255, 255, 255, 0.2);
					margin-bottom: 40rpx;
					position: relative;
					overflow: hidden;
					color: #fff;
					display: flex;
					flex-direction: column;
					transition: all 0.3s ease;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
					
					&:nth-child(2n) {
						margin-left: 40rpx;
					}
					
					&:active {
						transform: translateY(-4rpx);
						box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.4);
					}
					
					&.item2 {
						background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
						color: #fff;
						border-color: rgba(233, 30, 99, 0.5);
						box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.4);
						
						&:active {
							box-shadow: 0 12rpx 32rpx rgba(233, 30, 99, 0.5);
						}
					}
					
					.content {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 0 20rpx;
						
						.line1 {
							display: flex;
							flex-direction: row;
							align-items: baseline;
							justify-content: center;
							margin-bottom: 12rpx;
							
							.text1 {
								font-size: 44rpx;
								font-weight: 900;
								letter-spacing: 1rpx;
							}
							
							.text2 {
								font-size: 28rpx;
								font-weight: 600;
								margin-left: 4rpx;
							}
						}
						
						.line2 {
							font-size: 26rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							opacity: 0.9;
							font-weight: 500;
							
							.text1 {
								font-weight: 500;
							}
							
							.text2 {
								color: rgba(255, 255, 255, 0.8);
							}
						}
					}
					
					.tips {
						font-size: 28rpx;
						text-align: center;
						background: #EE7F33;
						padding: 8rpx 0;
						color: #fff;
					}
					
					.badge {
						position: absolute;
						top: -2rpx;
						right: -2rpx;
						padding: 4rpx 16rpx;
						font-size: 24rpx;
						background: #EE7F33;
						border-radius: 0 0 0 20rpx;
						color: #fff;
					}
				}
			}
			
			.p_info {
				font-size: 24rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>